<!-- 编辑管理 -->

<script setup>
import {
  getConsultApi,
  getArticleApi,
  getEditListApi,
  getDelListApi,
  getContentArticleApi,
  getArticleListApi,
} from "@/api/consult";
import { onMounted, reactive, ref } from "vue";
import { useArticleStatus } from "@/hooks/index";
import { formatDate } from "@/utils/index";
import { ElMessage } from "element-plus";
// =======================================
const articleStatus = useArticleStatus();
// =======================================
// 弹框控制
const isShow = ref(false);
// =======================================
// 小区分类数据
const articeList = ref([]);
// 定义数据
const getArticeList = async () => {
  const { data } = await getConsultApi();
  // console.log(data);
  articeList.value = data;
};

// =======================================
// 创建列表功能
const queryData = reactive({
  current: 1, //每页的页码
  pageSize: 3, //每页数量
  cate_id: "", //分类名
  title: "", //文章标题
  status: null, //状态
  create_time: "", //创建时间
});
const total = ref(0);
const list = ref([]);

const initData = async () => {
  const {
    data: { rows, count },
  } = await getArticleApi(queryData);
  // console.log(rows, count);
  total.value = count;
  list.value = rows;
};
// =============================================
onMounted(() => {
  getArticeList();
  initData();
});
// ==============================================
// 广告状态
const showStatus = (val) => {
  let res = articleStatus.find((item) => item.value === val * 1);
  return res ? res.label : "未知";
};
// ===========================================
// 每页数量切换
const sizeChange = (val) => {
  queryData.pageSize = val;
  initData();
};
// //页码切换
const currentChange = (val) => {
  queryData.current = val;
  initData();
};
// 搜索
const onSearch = () => {
  queryData.current = 1;
  initData();
};
// 重置
const onReset = () => {
  Object.assign(queryData, {
    current: 1, //每页的页码
    pageSize: 3, //每页数量
    cate_id: "", //分类名
    title: "", //文章标题
    status: null, //状态
    create_time: "", //创建时间
  });
  initData();
};
// ============================================
// 新增区域绑定
const formData = reactive({
  cate_id: "", //分类名
  content: "", //富文本
  pic_url: "", //封面图
  status: 1,
  title: "", //标题
});
// ===========================================
// 新增区域表单验证规则
const fromRules = {
  cate_id: [{ required: true, message: "请输入", trigger: "change" }],
  title: [{ required: true, message: "请输入", trigger: "blur" }],
  content: [{ required: true, message: "请输入", trigger: "blur" }],
};
// 表单校验
const formRef = ref();
// ==========================================
// 提交按钮表单校验
const onSubmit = async () => {
  try {
    // 提交校验
    await formRef.value.validate();
    // 提交数据
    const data = toRaw(formData);
    formData.id ? await getEditListApi(data) : await getContentArticleApi(data);
    // await getContentArticleApi(toRaw(formData))
    // 提示成功
    ElMessage.success("增加成功");
    // 关闭弹窗
    isShow.value = false;
    // 列表刷新
    // console.log(1111);
    initData();
  } catch (error) {
    console.log(error);
  }
};
// ============================================
// 编辑功能
const editRow = (id) => {
  // isShow.value = true
  replyData(id);
};
// // 编辑功能
const addRef = ref();

// // 数据回显
const replyData = async (id) => {
  // alert(id)
  let { data } = await getArticleListApi(id);
  // console.log(res);
  Object.assign(formData, data);
  isShow.value = true;
};
// 富文本
const quillRef = ref();
// 富文本回显
watch(
  () => formData.content,
  async (newVal) => {
    // console.log(newVal);
    if (formData.id) {
      await nextTick();
      quillRef.value.setHTML(newVal);
    }
  }
);
// ========================================================

// 标题
const title = computed(() => {
  return formData.id ? "编辑广告" : "新增广告";
});
// 删除功能
const delRow = async (id) => {
  // alert(id)
  await getDelListApi(id);
  ElMessage.success("删除成功");
  if (queryData.pageSize > 1 && list.value.length === 1) queryData.current--;
  initData();
};
// 关闭抽屉
const closeDra = async () => {
  Object.assign(formData, {
    community_code: "", //小区名称
    content: "", //富文本
    pic_url: "", //封面图
    sort: "", //权重
    status: 1,
    title: "", //标题
    type: "",
  });
  await nextTick(() => {
    formRef.value.resetFields();
  });
};
</script>

<template>
  <div class="app-container">
    <span>
      <h3 style="font-weight: 700; display: inline-block">通知通告</h3>
      用于一些党建宣传，社区知识等相关文章信息的编辑发布
    </span>
    <!-- 搜索区域 -->
    <el-card>
      <el-form
        :model="form"
        ref="form"
        label-position="top"
        :rules="rules"
        :inline="true"
        size="small "
      >
        <el-form-item label="文章标题">
          <el-input placeholder="请输入" v-model="queryData.title"></el-input>
        </el-form-item>
        <el-form-item label="分类名">
          <el-select
            placeholder="请输入"
            v-model="queryData.cate_id"
            clearable
            filterable
          >
            <el-option
              v-for="item in articeList"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select placeholder="请输入" v-model="queryData.status" clearable>
            <el-option
              v-for="item in articleStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model.number="queryData.create_time"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
          />
        </el-form-item>
        <el-form-item id="mTop">
          <div>
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button @click="onReset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
      <br />
    </el-card>
    <br />
    <!-- 工具区域 -->
    <!-- 抽屉 -->
    <el-card>
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" size="mini" @click="isShow = true"
            >新增咨询</el-button
          >
          <el-drawer
            @close="closeDra"
            v-model="isShow"
            :title="title"
            size="600px"
            :direction="direction"
            :before-close="handleClose"
          >
            <!-- 新增 -->
            <el-form
              label-width="80px"
              :inline="true"
              label-position="top"
              :model="formData"
              :rules="fromRules"
              ref="formRef"
              size="small"
            >
              <el-form-item label="文章标题" prop="title">
                <el-input v-model="formData.title"></el-input>
              </el-form-item>
              <el-form-item label="文章分类" prop="cate_id">
                <el-select
                  placeholder="请输入"
                  v-model="formData.cate_id"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in articeList"
                    :key="item.id"
                    :label="item.catename"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="文章状态" prop="status">
                <el-radio-group class="ml-4" v-model="formData.status">
                  <el-radio :label="1" size="small">隐藏</el-radio>
                  <el-radio :label="2" size="small">显示</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="文章封面">
                <ImageUpload v-model="formData.pic_url" :type="'adv'" />
              </el-form-item>
              <!-- 富文本 -->
              <QuillEditor
                ref="quillRef"
                v-model:content="formData.content"
                contentType="html"
              />

              <el-form-item>
                <el-button>取消</el-button>
                <el-button type="primary" @click="onSubmit">确定</el-button>
              </el-form-item>
            </el-form>
          </el-drawer>
        </div>
      </el-row>
      <br />
      <!--表格区域 -->
      <el-table :data="list" border stripe>
        <el-table-column
          type="index"
          label="ID"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="title"
          label="文章标题"
          align="center"
        ></el-table-column>
        <el-table-column label="分类名" align="center">
          <template #default="{ row }">
            {{ row.article_cate.catename }}
          </template>
        </el-table-column>
        <!-- 封面图 -->
        <el-table-column label="封面图">
          <template #default="{ row }">
            <!-- {{ row.pic_url}} -->
            <ImagePreview :src="row.pic_url" />
            <!-- <el-image style="width: 100px; height: 100px" :src="'http://124.223.14.236:8881' + row.pic_url" /> -->
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="{ row }">
            {{ showStatus(row.status) }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template #default="{ row }">
            {{ formatDate(row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button size="small" @click="editRow(row.id)" type="text"
              >编辑</el-button
            >
            <el-popconfirm title="确定删除嘛?" @confirm="delRow(row.id)">
              <template #reference>
                <el-button size="small" type="text">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <!-- 分页区域 -->
      <el-pagination
        small="true"
        @size-change="sizeChange"
        @current-change="currentChange"
        v-model:current-page="queryData.current"
        :page-sizes="[3, 5, 10]"
        v-model:page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
        :pager-count="7">
      </el-pagination>
    </el-card>
  </div>
</template>
<style scoped lang="scss">
#mTop {
  margin-right: -13px;
  margin-bottom: 10px;
}

:deep(.ql-toolbar) {
  width: 500px;
}

:deep(.ql-container) {
  height: 200px;
  width: 500px;
}
</style>
